<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<!--引入重置样式表和图标字体-->
		<link rel="stylesheet" href="../css/reset.css" />
		<link rel="stylesheet" href="../font/css/all.css" />
		<style>
			.top-bar-wrapper{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: #e3e4e6;
				
			}
			.top-bar-wrapper a{
				text-decoration: none;
				
			}
			.current-city a,.shortcut li a,span{
				color: #999;
				font:12px/1.5 Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif;
				
			}
			.location .fas{
				color: #F10215;
				
			}
			/*设置城市列表的样式*/
			.location .city-list{
				/*刚刚上来的时候不显示*/
				display: none;
				width: 300px;
				height: 436px;
				background-color: #fff;
				border: 1px solid rgb(204,204,204);
				/*设置绝对定位，使其不占据页面的位置*/
				position: absolute;
				top: 31px;
				box-shadow: 0 2px 2px rgba(0,0,0,.2);
				z-index: 999;
			}
			/*当鼠标移入到location时，让city-list显示*/
			.location:hover .city-list{
				display: block;
			}
			
			.current-city{
				padding: 0 10px;
				position: relative;
				/*因为加上padding之后高度会有变化，所以在原来就为他加一个透明的边框*/
				border: 1px solid transparent;
				border-bottom: none;
				
				z-index: 9999;
			}
			/*设置current-city的移入的效果*/
			.location:hover .current-city{
				background-color: white;
				border: 1px solid rgb(204,204,204);
				border-bottom: none;
				padding-bottom: 1px;
			}
			.fas{
				color: #999;
				font-size: 12px;
			}
			
			
			.line{
				width: 1px;
				height: 10px;
				background-color: #ccc;
				margin:10px 5px 0;		
				
			}
			
			
			.top-bar{
				width: 1190px;
				margin:0 auto;
				position: relative;
				
			}
			.location{
				float: left;
			}
			.shortcut{
				float: right;
			}
			.shortcut li{
				float: left;
			}
			.top-bar a:hover,.top-bar a.red{
				color: #F10215;
			}
		</style>
	</head>

	<body>
		<!--创建外围的容器-->
		<div class="top-bar-wrapper">
			<!--创建内部容器-->
			<div class="top-bar">
				<!--左侧的菜单-->
				<div class="location">
					<div class="current-city">
						<i class="fas fa-map-marker-alt"></i>
						<a href="javascript:;">北京</a>
					</div>
					<!--放置城市列表的div-->
					<div class="city-list">
						
					</div>
				</div>

				<!--右侧的菜单-->
				<ul class="shortcut">
					<li>
						<a href="javascript:;">你好，请登录</a>
						<a class="red" href="javascript:;">免费注册</a>
					</li>

					<!--分割线-->
					<li class="line"></li>
					<li>
						<a href="javascript:;">我的订单</a>
					</li>

					<li class="line"></li>
					<li>
						<a href="javascript:;">我的京东</a>
						<i class="fas fa-angle-down"></i>
					</li>

					<li class="line"></li>
					<li>
						<a href="javascript:;">京东会员</a>
					</li>

					<li class="line"></li>
					<li>
						<a class="red" href="javascript:;">企业采购</a>
						<i class="fas fa-angle-down"></i>
					</li>

					<li class="line"></li>
					<li>
						<span>客户服务</span>
						<i class="fas fa-angle-down"></i>
					</li>

					<li class="line"></li>
					<li>
						<span>网站导航</span>
						<i class="fas fa-angle-down"></i>
					</li>

					<li class="line"></li>
					<li>
						<span>手机京东</span>
					</li>
				</ul>
			</div>
		</div>
	</body>

</html>